<template>
  <div class="login-conter">
    <div class="conter">
      <div class="conter-box">
        <div class="conter-left">
          <div class="conter-leftimg">
            <img style="width: 100%" src="@/assets/admin/logo.png" alt />
          </div>
          <div>欢迎！</div>
          <div>智学商城-后台管理系统</div>
        </div>
        <div class="conter-right">
          <div class="right-title">登录</div>
          <div>
            <el-input
              class="inputs"
              v-model.trim="FormData.username "
              placeholder="请输入账号"
              :prefix-icon="User"
            />
          </div>
          <div>
            <el-input
              class="inputs"
              v-model.trim="FormData.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              show-password
            />
          </div>
          <el-button class="buttons" type="primary" @click="fangdou">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { User, Lock } from "@element-plus/icons-vue";
import { post } from "@/util/http";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
import { mapActions } from "vuex";
import { debounce } from "@/fangdou/fangdou";
export default {
  data() {
    return {
      Lock,
      User,
      FormData: {
        _gp: "admin",
        _mt: "login",
        username: "admin",
        password: "1234567",
      },
      mydata: {},
    };
  },
  created() {},
  methods: {
    ...mapActions(["myDate"]),
    submi() {
      if (this.FormData.username.length == 0) {
        ElMessage.warning("请输入账号");
        return;
      }
      if (this.FormData.password.length == 0) {
        ElMessage.warning("请输入密码");
        return;
      }
      if (this.FormData.username != "" && this.FormData.username != "") {
        post(this.FormData)
          .then((res) => {
            if (200 == res.data.errno) {
              Object.assign(this.mydata, {
                username: this.FormData.username,
                password: this.FormData.password,
              });
              this.myDate(this.mydata);
              // let time = new Date().getHours();//9个小时
              Cookies.set("token", res.data.data, { expires: 1 / 24 / 2 }); // 将token存储在Cookies里,设置过期时间为半个小时
              if (this.$route.query.path) {
                //如果当前路由存在
                this.$router.push({ path: this.$route.query.path }); //那么路由就跳入标记的路由页面
              } else {
                this.$router.push({ path: "/" }); //否则就跳到首页
              }
            } else {
              ElMessage.warning(res.data.errmsg);
            }
          })
      }
    },
    fangdou: debounce(function () {
      this.submi();
    }),
  },
};
</script>
<style lang="less" scoped>
.login-conter {
  width: 100%;
  height: 100%;
  display: flex;
  background-image: url("../assets/admin/login-back.png");
  background-size: 100% 100%;
  position: fixed;
  .conter {
    width: 800px;
    height: 400px;
    margin: auto;
    .conter-box {
      width: 100%;
      height: 100%;
      display: flex;
      white-space: nowrap;
    }
    .conter-left {
      width: 35%;
      height: 100%;
      color: #fff;
      background-color: rgb(55, 85, 254);
      text-align: center;
      .conter-leftimg {
        width: 100px;
        border-radius: 50%;
        margin: auto;
        overflow: hidden;
        margin-top: 40%;
        margin-bottom: 20px;
        box-shadow: rgba(255, 255, 255, 0.3) 3px 0px 8px 8px;
      }
    }
    .conter-right {
      width: 65%;
      height: 100%;
      background-color: #fff;
      text-align: center;
      .right-title {
        margin-top: 25%;
      }
      .inputs {
        width: 260px;
        margin-top: 20px;
      }
      .buttons {
        width: 120px;
        margin-top: 20px;
      }
    }
  }
}
</style>